<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <h1>ajax和json综合</h1>
    <!--
    获取好友列表
    说明：
        onclick="method01()" 给当前按钮绑定单击事件，单击按钮的时候就会执行函数method01()，
        在该函数中向后台发送请求，接收后台响应的json格式的数据
-->
    <input type="button" value="响应数据是json字符串" onclick="method01()"> <br>
    <hr>
    <h3>好友列表</h3>
    <!--存放查询好友的结果信息-->
    <div id="messageDiv"></div>

    <!-- 显示好友列表的表格 -->
    <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <!--
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    -->

    </table>

</body>
<!--导入axios库-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">

    /*
      需求：向后台发送请求，获取好友列表并显示到页面中
      说明：后台的url地址： "http://localhost:8080/axiosJsonDemo01Servlet"
     */

    function method01() {
        //1.向后台发送异步请求
        axios.post("http://localhost:8080/axiosJsonDemo01Servlet")
            .then(resp => {

                //2.处理后台的响应
                //console.log(resp.data);
                /*
                    说明：通过后台响应的数据发现后台响应的数据是：
                          {flag: true, message: '查询好友列表成功', valueData: Array(3)} 
                          
                          valueDate = [
                                        {age: 18, id: '001', name: '张三'}
                                        {age: 19, id: '002', name: '李四'}
                                        {age: 20, id: '003', name: '王五'}
                                      ]
                */
                let obj = resp.data

                //2.1 判断响应数据是否成功

                if (obj.flag) {
                    //说明查询好友列表成功

                    //2.2 将成功的信息放到标签<div id="messageDiv"></div>文本中
                    document.getElementById("messageDiv").innerHTML = obj.message;

                    //2.3 定义变量保存从valueDate数组中去除的数据
                    let content = "";
                    //2.4 遍历数组valueDate取出每个json对象
                    //f就是obj.valueDate数组中的每个json对象
                    for (let f of obj.valueData) {
                        //2.5 使用对象f调用json对象中的key获取value并结合上述的tr标签进行拼接
                        content = content + `<tr>
                                                <td>${f.id}</td>
                                                <td>${f.name}</td>
                                                <td>${f.age}</td>
                                            </tr> `;
                    }
                    //2.6 获取table标签中原来的文本与content拼接
                    document.getElementById("myTable").innerHTML += content; //这里必须是 += 保证table标签中原来的内容不被覆盖
                }

                else {
                    //说明查询好友列表失败
                    document.getElementById("messageDiv").innerHTML = obj.message;
                }
            });
    }
</script>

</html>